<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
</style>

<div id="sports-information1">
	<div id="sports-addArea">
		<h2></h2>
		<div></div>
	</div>
	<div id="cart">
		<dl>
			<dt class="sports-list-caption">종류</dt>
			<dd id="first">
				<ul>
					<li class="food-list"><a
						href="javascript:myfoodchoice('한식',null);"><span>한식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice('중식',null);"><span>중식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice('양식',null);"><span>양식</span></a></li>
					<li class="food-list"><a
						href="javascript:myfoodchoice('간식',null);"><span>간식</span></a></li>
				</ul>
			</dd>
		</dl>
		<dl id="foodS-chedule-Choice">
			<dt class="sports-list-caption">식품</dt>
			<dd id="two">
				<ul>
					<c:forEach var="Classfication" items="${foodClassfication }">
						<li class="sports-list"><a
							href="javascript:myfoodchoice(${foodchoice.foodClass }, ${Classfication.foodClassfication });"><span>${Classfication.foodClass
									}</span></a></li>
					</c:forEach>
				</ul>
			</dd>
		</dl>
		<dl>
			<dt class="sports-list-caption">성분</dt>
			<dd id="three">
				<ul>
					<li class="slider-li">
						<p class="title-slider" title='1'>칼로리</p>
						<div class="slider"></div>
						<p class="num">0~3000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='2'>탄수화물</p>
						<div class="slider"></div>
						<p class="num">0~350</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='3'>단백질</p>
						<div class="slider"></div>
						<p class="num">0~110</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='4'>지방</p>
						<div class="slider"></div>
						<p class="num">0~190</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='5'>나트륨</p>
						<div class="slider"></div>
						<p class="num">0~40,000</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='6'>식이섬유</p>
						<div class="slider"></div>
						<p class="num">0~100</p>
					</li>
					<li class="slider-li">
						<p class="title-slider" title='7'>콜레스테롤</p>
						<div class="slider"></div>
						<p class="num">0~1,500</p>
					</li>
					<li style="width: 100%; height: 67px;"><input type="text"
						id="slider-result"
						style="border: 0; color: #f6931f; font-weight: bold;" /></li>
				</ul>
			</dd>
		</dl>
	</div>
	<div id="sports-div" class="sports-div food" style="height: 37%;">
		<div style="width: 100%; height: 95px;">
			<div id="sports-div-image">이미지</div>
			<div id="sports-div-text">텍스트</div>
		</div>
	</div>
</div>